<template>
	<el-container class="container">
        <aside-component></aside-component>
        <el-container>
            <el-header height="50px" class="header">
                <header-component></header-component>
            </el-header>
            <el-main class="main">
                <main-component></main-component>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import AsideComponent from '@/components/aside.vue'
import HeaderComponent from '@/components/header.vue'
import MainComponent from '@/components/main.vue'
export default {
	name: 'Index',
	components: {
        AsideComponent,
        HeaderComponent,
        MainComponent,
    }
}
</script>

<style lang="scss" scoped>
	.header{
		border-bottom: 1px solid $border-color;
	}
	.main{
        background: $bg-color-grey;
        padding: 0;
	}
</style>